<template>
	<view>
		<view class="search-box">
			<view class="search">
				<text class="icon">&#xe628;</text>
				<input type="text" value="" v-model="searchKey" placeholder="商品sku编码" @input="searchInput" />
				<!-- <text @click.stop="clear" v-if="searchKey">清空</text> --> 
			</view>
		</view>
		<view class="place"></view>
		<view class="list-wraper">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="t-1">
					商品名称：{{item.name}}
				</view>
				<view class="t-2">	
					SKU编码：{{item.sku_code}}
				</view>
				<view class="t-3">
					入库数量：<text>{{item.num}}</text>
				</view>
				<view class="t-2">
					时间：<text>{{item.create_time}}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="more" v-if="count>10"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {uniLoadMore},
		data() {
			return {
				more:'more',
				searchKey:'',
				query:{
					page:1,
					limit:10,
					sku_code:''
				},
				count:10,
				list:[]
			};
		},
		onLoad() {
			this.getData()
		},
		// 上拉加载事件
		onReachBottom() {
			if(this.count<=this.list.length){ 
				this.more = 'noMore'
				return false
			}
			this.query.page++
			this.getData()
		},
		methods:{
			getData(){
				this.more = 'loading'
				this.$api.historyRk(this.query).then(res=>{
					if(res.data.code==1){
						this.count = res.data.data.count
						this.list = this.list.concat(res.data.data.list)
						if(this.count<=this.list.length){
							this.more = "noMore"
						}else{
							this.more = "more"
						}
					}else{
						this.$tools.msg(res.data.msg)
					}
				})
			},
			searchInput(e){
				if(e.detail.value.length>2){
					this.query.sku_code = e.detail.value
				}else{
					this.query.sku_code = ''
				}
				setTimeout(()=>{
					this.list = []
					this.getData()
				},500)
			},
			// clear(){
			// 	if(this.searchKey){
			// 		this.searchKey = ''
			// 		this.list = []
			// 		this.getData()
			// 	}
			// },
		}
	}
</script>

<style lang="less" scoped>
page{
	background: #F2F2F2;
}
.place{
	height: 15upx;
	width: 100%;
}
.search-box{
	width: 100%;
	height: 100upx;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	.search{
		width: 500upx;
		height: 55upx;
		border-radius: 26upx;
		background: #F2F2F2;
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon{
			font-size: 28upx;
			padding: 0 20upx;
			color: #999999;
		}
		input{
			flex: 1;
			font-size: 24upx;
		}
	}
}

.list-wraper{
	width: 100%;
	display: flex;
	flex-direction: column;
	.list{
		width: calc(100% - 60upx);
		padding: 25upx 30upx;
		background: #FFFFFF;
		margin-bottom: 15upx;
		.t-1{
			font-size: 25upx;
			color: #333333;
		}
		.t-2{
			font-size: 21upx;
			color: #666666;
			padding: 10upx 0;
		}
		.t-3{
			font-size: 21upx;
			color: #666666;
			text{
				font-size: 24upx;
				color: #FE7827;
			}
		}
	}
}
</style>
